<!--银行票据兑付录入页面-->
<template>
  <!-- 新增录入画面对话框-->
  <el-dialog
    title="银行票据兑付录入"
    center
    width="1024px"
    :visible.sync="open"
    :close-on-click-modal="false"
    @close="closeFn"
  >
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="110px" :disabled="disabled">
      <div slot="header" class="label-header-msg">
        <span>账户信息录入</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="票据号码：" prop="noteNumber">
            <el-input v-model="submitParams.noteNumber" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="票据类型：" prop="draftType">
            <el-select style="width: 100%" v-model="submitParams.draftType" placeholder="">
              <el-option
                v-for="dict in dictMap.DRAFT_TYPE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务类型：" prop="bizTypeCode">
            <el-select style="width: 100%" v-model="submitParams.bizTypeCode" placeholder="">
              <el-option
                v-for="dict in dictMap.BIZ_TYPE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="出票行行号：" prop="payerAccBrno">
            <el-input
              v-model="submitParams.payerAccBrno"
              @change="getBankInf('payerAccBrno', submitParams.payerAccBrno)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('payerAccBrno')">
              行名行号查询
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="出票行行名：" prop="payerAccBrname">
            <el-input v-model="submitParams.payerAccBrname" />
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="this.submitParams.draftType==='0'">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="代理付款行行号：" prop="payerBrno">
            <el-input v-model="submitParams.payerBrno" @change="getBankInf('payerBrno', submitParams.payerBrno)" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('payerBrno')">
              行名行号查询
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="代理付款行行名：" prop="payerBrname">
            <el-input v-model="submitParams.payerBrname" :disabled="true" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出票人账号：" prop="issueActno">
            <el-input v-model="submitParams.issueActno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出票人名称：" prop="issueName">
            <el-input v-model="submitParams.issueName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请人账号：" prop="payerActno">
            <el-input v-model="submitParams.payerActno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请人名称：" prop="payerName">
            <el-input v-model="submitParams.payerName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收款人账号：" prop="payeeActno">
            <el-input v-model="submitParams.payeeActno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款人名称：" prop="payeeName">
            <el-input v-model="submitParams.payeeName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="原收款人名称：" prop="oriPayeeName">
            <el-input v-model="submitParams.oriPayeeName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="票据种类：" prop="draftCode">
            <el-select style="width: 100%" v-model="submitParams.draftCode" placeholder="" :disabled="isDisabled">
              <el-option
                v-for="dict in dictMap.DRAFT_CODE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="记账标志：" prop="cbflag">
            <el-select style="width: 100%" v-model="submitParams.cbflag" placeholder="">
              <el-option
                v-for="dict in dictMap.CBFLAG"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出票日期：" prop="issueDate">
            <el-date-picker
              v-model="submitParams.issueDate"
              type="date"
              value-format="yyyyMMdd"
              placeholder=""
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出票金额：" prop="issueAmount">
            <ht-amount-input v-model="submitParams.issueAmount" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="提示付款日期：" prop="payDate">
            <el-date-picker
              v-model="submitParams.payDate"
              type="date"
              value-format="yyyyMMdd"
              placeholder=""
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="汇票到期日：" prop="maturityDate">
            <el-date-picker
              v-model="submitParams.maturityDate"
              type="date"
              value-format="yyyyMMdd"
              placeholder=""
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="兑付日期：" prop="workdate">
            <el-date-picker
              v-model="submitParams.workdate"
              type="date"
              disabled
              value-format="yyyyMMdd"
              placeholder=""
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结算金额：" prop="amount">
            <ht-amount-input v-model="submitParams.amount" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="支付密码：" prop="payPassword">
            <el-input v-model="submitParams.payPassword" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密押：" prop="draftKey">
            <el-input v-model="submitParams.draftKey" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="背书人数：" prop="endorserNumber">
            <el-input v-model="submitParams.endorserNumber" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="背书人名称：" prop="endorserName">
            <el-input v-model="submitParams.endorserName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="用途：" prop="use">
            <el-input type="textarea" v-model="submitParams.use" maxlength="256" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="isLoading" v-if="!isSubmit">提交</el-button>
      <el-button type="warning" @click="refresh" :loading="isLoading">重置</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
  </el-dialog>
</template>

<script>
import { submit, query } from "@/api/cnaps/bepsDraft/bank_note_pay_entry.js";
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import HtAmountInput from "@/views/components/HtAmountInput";
export default {
  name: "BankNotePayEntry",
  mixins: [listPageMixin],
  components: { HtAmountInput, BankBranchDialog },
  computed: {},
  watch:{
    "submitParams.endorserName": {
      handler(val) {
        if(val!==''&&val!=undefined){
          this.$set(this.submitParams,"endorserNumber","1")
          this.$set(this.rules.oriPayeeName[0], "required", true);
        }else{
          this.$set(this.submitParams,"endorserNumber","0")
          this.$set(this.rules.oriPayeeName[0], "required", false);
        }
      },
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      isDisabled: true,
      disabled: false,
      isSubmit: false,
      queryData: {},
      isLoading: false,
      // 录入参数
      submitParams: {
        noteNumber: "",
        draftType: "0",
        bizTypeCode: "D203",
        payerAccBrno: "",
        payerAccBrname: "",
        payerBrno: "",
        payerBrname: "",
        issueActno: "",
        issueName: "",
        payerActno: "",
        payerName: "",
        payeeActno: "",
        payeeName: "",
        oriPayeeName: "",
        draftCode: "1",
        cbflag: "",
        issueDate: "",
        issueAmount: "",
        payDate: "",
        maturityDate: "",
        workdate: "",
        amount: "",
        payPassword: "",
        draftKey: "",
        endorserNumber: "0",
        use: "",
        endorserName:"",
      },
      searchFormDictList: ["DRAFT_TYPE", "DRAFT_CODE", "BIZ_TYPE", "CBFLAG"],
      rules: {
        noteNumber: [{ required: true, message: "不能为空", trigger: "blur" }],
        draftType: [{ required: true, message: "不能为空", trigger: "change" }],
        bizTypeCode: [{ required: true, message: "不能为空", trigger: "change" }],
        issuedBrno: [{ required: true, message: "不能为空", trigger: "change" }],
        issuedBrname: [{ required: true, message: "不能为空", trigger: "change" }],
        issueActno: [{ required: true, message: "不能为空", trigger: "blur" }],
        issueName: [{ required: true, message: "不能为空", trigger: "blur" }],
        payerActno: [{ required: true, message: "不能为空", trigger: "blur" }],
        payerName: [{ required: true, message: "不能为空", trigger: "blur" }],
        payeeActno: [{ required: true, message: "不能为空", trigger: "blur" }],
        payeeName: [{ required: true, message: "不能为空", trigger: "blur" }],
        draftCode: [{ required: true, message: "不能为空", trigger: "change" }],
        cbflag: [{ required: true, message: "不能为空", trigger: "change" }],
        issueDate: [{ required: true, message: "不能为空", trigger: "change" }],
        issueAmount: [{ required: true, message: "不能为空", trigger: "blur" }],
        payDate: [{ required: true, message: "不能为空", trigger: "change" }],
        maturityDate: [{ required: true, message: "不能为空", trigger: "change" }],
        workdate: [{ required: true, message: "不能为空", trigger: "change" }],
        amount: [{ required: true, message: "不能为空", trigger: "blur" }],
        draftKey: [{ required: true, message: "不能为空", trigger: "blur" }],
        oriPayeeName : [ { max: 60, message: "长度最大为60位", trigger: "blur" }],
      },
    };
  },
  created() {
    query().then((res) => {
      this.$set(this.submitParams, "workdate", res.result.workdate);
      this.queryData = res.result;
    });
  },
  mounted() {},

  methods: {
    cancel() {
      this.open = false;
      this.refresh();
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          if (this.submitParams.issueDate > this.submitParams.payDate) {
            this.msgError("出票日期不能大于提示付款日期");
            return;
          } else if (this.submitParams.issueDate > this.submitParams.maturityDate) {
            this.msgError("出票日期不能大于汇票到期日");
            return;
          } else if (this.submitParams.payDate > this.submitParams.maturityDate) {
            this.msgError("提示付款日期不能大于汇票到期日");
            return;
          } else {
            this.loading = true;
            submit(this.submitParams)
              .then((response) => {
                this.msgSuccess("提交成功");
                this.$alert(`CORE_ID: ${response.result.rspId}`, "生成交易流水号", {
                  confirmButtonText: "确定",
                  //刷新一下查询列表 TODO
                  callback: (action) => {
                  },
                });
                this.loading = false;
                this.isSubmit = true;
                this.disabled = true;
                this.open = false;
              })
              .catch((err) => {
                this.$set(this.rules.stBrno[0], "required", true);
                this.$set(this.rules.stBrnoName[0], "required", true);
                this.loading = false;
              });
          }
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      this.isSubmit = false;
      this.disabled = false;
      this.$set(this.submitParams, "workdate", this.queryData.workdate);
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (row.bankCode == this.queryData.userInfo.cnapsBrno) {
        this.isDisabled = false;
      } else {
        this.isDisabled = true;
      }
      if (fromFlag == "payerAccBrno") {
        this.$set(this.submitParams, "payerAccBrno", row.bankCode);
        this.$set(this.submitParams, "payerAccBrname", row.orgFullname);
      } else if (fromFlag == "payerBrno") {
        this.$set(this.submitParams, "payerBrno", row.bankCode);
        this.$set(this.submitParams, "payerBrname", row.orgFullname);
      }
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },

    closeFn() {
      this.open = false;
      this.refresh();
    },
    show() {
      this.open = true;
    },
    //回车取行号信息
    getBankInf(searchType, bankCode) {
      getBankInfByBankCode(bankCode).then((response) => {
        if (response.code == "S" && response.result !== undefined) {
          switch (searchType) {
            case "payerAccBrno":
              this.$set(this.submitParams, "payerAccBrno", response.result.bankCode);
              this.$set(this.submitParams, "payerAccBrname", response.result.orgFullname);
              break;
            case "payerBrno":
              this.$set(this.submitParams, "payerBrno", response.result.bankCode);
              this.$set(this.submitParams, "payerBrname", response.result.orgFullname);
              break;
          }
        } else {
          this.msgError("查无此行号");
          switch (searchType) {
            case "payerAccBrno":
              this.$set(this.submitParams, "payerAccBrname", null);
              break;
            case "payerBrno":
              this.$set(this.submitParams, "payerBrname", null);
              break;
          }
        }
      });
    },
  },
};
</script>
<style>
.app-container {
  overflow: scroll;
}
.dialog-footer {
  margin: 10px 0;
  text-align: center;
}
</style>
